<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
@keyframes test {
  from {
    --inherited: from;
    --non-inherited: from;
  }
  to {
    --inherited: to;
    --non-inherited: to;
  }
}
#container {
  animation: test 1s;
}
</style>
<div id="container">
  <div id="child"></div>
</div>
<script>
CSS.registerProperty({
  name: '--inherited',
  syntax: '*',
  initialValue: 'initialValue',
  inherits: true,
});
CSS.registerProperty({
  name: '--non-inherited',
  syntax: '*',
  initialValue: 'initialValue',
  inherits: false,
});

function read(element, property) {
  return getComputedStyle(element).getPropertyValue(property);
}

test(() => {
  container.style.animationDelay = '-0.25s';
  assert_equals(read(container, '--inherited'), ' from', 'container at 25%');
  assert_equals(read(child, '--inherited'), ' from', 'child at 25%');

  container.style.animationDelay = '-0.75s';
  assert_equals(read(container, '--inherited'), ' to', 'container at 75%');
  assert_equals(read(child, '--inherited'), ' to', 'child at 75%');
}, 'CSS Animations on registered inherited custom properties should get inherited');

test(() => {
  container.style.animationDelay = '-0.25s';
  assert_equals(read(container, '--non-inherited'), ' from', 'container at 25%');
  assert_equals(read(child, '--non-inherited'), 'initialValue', 'child at 25%');

  container.style.animationDelay = '-0.75s';
  assert_equals(read(container, '--non-inherited'), ' to', 'container at 75%');
  assert_equals(read(child, '--non-inherited'), 'initialValue', 'child at 75%');
}, 'CSS Animations on registered non-inherited custom properties should not get inherited');
</script>
